﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="MyShoppingCart.aspx.cs" Inherits="_MyShoppingCart" Theme="Default"
    EnableViewState="true" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/banners.js"></script>
    <link rel="stylesheet" href="styles/banners.css" />
    <style type="text/css">
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
        {
            border: 1px solid #fcefa1;
            background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
            color: #363636;
        }

            .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a
            {
                color: #363636;
            }

        .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error
        {
            border: 1px solid #cd0a0a;
            background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
            color: #cd0a0a;
        }

            .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a
            {
                color: #cd0a0a;
            }

        .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text
        {
            color: #cd0a0a;
        }

        .paymethoddiv
        {
            display: inline-block !important;
            vertical-align: middle !important;
            width: 150px !important;
            padding-left: 90px;
        }

        #divPaymentMethods
        {
            margin-top: 5px;
            height: 70px;
            width: 765px;
            border-bottom: solid 1px #DFDCD5;
            border-right: solid 1px #DFDCD5;
            background-color: White;
            margin-top: 5px;
            margin-bottom: 2px;
        }
    </style>
    <script type="text/javascript" language="javascript">

        var as = 1;

        $(document).ready(function () {
            banner1();
            banner2();
            banner3();

            //            document.getElementById("totalpayment1").innerText = document.getElementById("<%=lblTotal.ClientID %>").innerText;
            document.getElementById("totalpayment2").textContent = document.getElementById("<%=lblTotal.ClientID %>").textContent;

        });

        function del(i, o, s) {
            if (confirm("¿Desea eleminiar el producto de su carrito de compras?")) {
                PageMethods.Del(i, s,
                function (t) {
                    if (t) {
                        document.getElementById("<%=lblSubtotal.ClientID %>").textContent = t.split("|")[0];
                        //                        document.getElementById("<%=lblTax.ClientID %>").innerText = t.split("|")[1];
                        document.getElementById("<%=lblTotal.ClientID %>").textContent = t.split("|")[2];
                        //                        document.getElementById("totalpayment1").innerText = t.split("|")[2];
                        document.getElementById("totalpayment2").textContent = t.split("|")[2];

                        var g = o.parentNode.parentNode;
                        var p = o.parentNode;
                        g.removeChild(p);
                        if (document.getElementById("total")) {
                            var total = parseInt(document.getElementById("total").textContent);
                            total = total - 1;
                            document.getElementById("total").textContent = total;
                        }
                    }
                },
                function (error) {
                    alert(error.get_message());
                });
            }
        }

        function upd(o, s) {
            var x = 0;
            PageMethods.Upd(s,
                    function (t) {
                        if (t) {
                            document.getElementById("<%=lblSubtotal.ClientID %>").textContent = t.split("|")[0];
                            //                            document.getElementById("<%=lblTax.ClientID %>").innerText = t.split("|")[1];
                            document.getElementById("<%=lblTotal.ClientID %>").textContent = t.split("|")[2];
                            //                            document.getElementById("totalpayment1").innerText = t.split("|")[2];
                            document.getElementById("totalpayment2").textContent = t.split("|")[2];

                            alert("Su carrito de compras de ha actualizado.");
                        }
                    },
                    function (error) {
                        alert(error.get_message());
                    });
                }

                function validate(i) {
                    return true;
                }

                function EndShopping() {
                    $('#btnEnd').hide();
                    $('#btnPayment').hide();
                    $("#next").hide();
                    document.getElementById("divStep_3").style.display = "block";
                    document.getElementById("step_3").className = "cart-steps-selected";

                    PageMethods.ChangeSt('3',
                                            function (t) {
                                                alert("Su pedido fue enviado. Gracias por preferir Arbolandia.com.");
                                            },
                                            function (error) {
                                                alert(error.get_message());
                                            });
                }

                function PaymentDineroMail() {
                    $('#btnEnd').hide();
                    $('#btnPayment').hide();
                    $("#next").hide();
                    $('#divStep_externalPayment').show();
                    PageMethods.ChangeStatus('2',
                                function (t) {
                                    if (t) {
                                        var urlParams = "https://checkout.dineromail.com/CheckOut?";
                                        urlParams += "merchant=koosukeminami@gmail.com";
                                        urlParams += "&buyer_country=mex";
                                        urlParams += "&country_id=4";
                                        urlParams += "&language=es";
                                        urlParams += "&payment_method_available=mx_oxxo;mx_7eleven";
                                        urlParams += "&item_name_1=Compra+Articulos+Arbolandia.com";
                                        urlParams += "&item_quantity_1=1";
                                        urlParams += "&item_ammount_1=" + t;
                                        urlParams += "&item_currency_1=mxn";
                                        urlParams += "&buyer_name=" + $('#txtName').val();
                                        urlParams += "&buyer_lastname=" + $('#txtLastName').val();
                                        urlParams += "&buyer_email=" + $('#txtEmail').val();
                                        urlParams += "&buyer_phone=" + $('#txtPhone').val();
                                        urlParams += "&ok_url=http://www.arbolandia.com";
                                        urlParams += "&error_url=http://www.arbolandia.com";
                                        urlParams += "&pending_url=http://www.arbolandia.com";
                                        urlParams += "&url_redirect_enabled=1";
                                        urlParams += "&currency=mxn";
                                        document.location.href = urlParams;

                                    }
                                },
                                function (error) {
                                    alert(error.get_message());
                                });
                }
                function PaymentPayPal() {
                    $('#btnEnd').hide();
                    $('#btnPayment').hide();
                    $("#next").hide();
                    $('#divStep_externalPayment').show();
                    PageMethods.ChangeStatus('4',
                                function (t) {
                                    if (t) {
                                        var urlParams = "https://www.paypal.com/cgi-bin/webscr?";
                                        urlParams += "cmd=_xclick";
                                        urlParams += "&business=koosukeminami@gmail.com";
                                        urlParams += "&currency_code=MXN";
                                        urlParams += "&item_name=Compra+Articulos+Arbolandia.com";
                                        urlParams += "&item_number=1";
                                        urlParams += "&amount=" + t;
                                        urlParams += "&shopping_url=http://www.arbolandia.com";
                                        urlParams += "&first_name=" + $('#txtName').val();
                                        urlParams += "&last_name=" + $('#txtLastName').val();
                                        urlParams += "&address1=" + $('#txtAddress1').val();
                                        urlParams += "&address2=" + $('#txtAddress2').val();
                                        urlParams += "&city=" + $("#txtCity").val();
                                        urlParams += "&state=" + $('#txtState').val();
                                        urlParams += "&zip=" + $('#txtZipCode').val();
                                        urlParams += "&night_phone_a=" + $('#txtPhone').val();
                                        urlParams += "&email=" + $('#txtEmail').val();
                                        document.location.href = urlParams;
                                    }
                                },
                                function (error) {
                                    alert(error.get_message());
                                });
                }

                function fnClickStep1() {
                    document.getElementById('btnhiddenStep1').click();
                }
                function fnOnChangedrp() {
                    $('#drpshippingValue').val($('#drpShippingMethod').val());
                    $('#btnhiddenStep1').click();
                }
    </script>
    <script type="text/javascript" language="javascript">
        $(function () {
            var allFields = $([]).add($("#txtPhone")).add($("#txtZipCode")).add($("#txtCity")).add($("#txtAddress1")).add($("#txtEmail")).add($("#txtLastName")).add($("#txtName"));

            function ValidFormStep2() {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = checkLength($("#txtName"), 'Nombre', 2, 200);
                bValid = checkLength($("#txtLastName"), 'Apellido', 2, 200);
                bValid = checkRegexp($("#txtEmail"), /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "Email Invalido");
                bValid = checkLength($("#txtAddress1"), 'Direccion 1', 2, 200);
                bValid = checkLength($("#txtCity"), 'Ciudad', 2, 200);
                bValid = checkRegexp($("#txtZipCode"), /^([0-9])+$/, "Codigo Invalido");
                bValid = checkLength($("#txtZipCode"), 'Codigo Postal', 6, 6);
                bValid = checkRegexp($("#txtPhone"), /^([0-9])+$/, "Telefono Invalido");

                return bValid;
            }
            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    return false;
                } else {
                    o.removeClass("ui-state-error");
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    return false;
                } else {
                    o.removeClass("ui-state-error");
                    return true;
                }
            }

            function next() {
                var tot = document.getElementById("<%=lblTotal.ClientID %>").textContent;
                tot = tot.replace(" MXN", ""); tot = tot.replace("$", "");
                if (parseFloat(tot) > 0) {
                    if (as == 2) {
                        if (confirm("¿Desea continuar con la forma de Pago?")) {
                            var valid = ValidFormStep2();
                            //                    ///*** BEGIN TEST SOLAMENTE ***////
                            //                    valid = true;
                            //                    ///*** END TEST SOLAMENTE ***////
                            if (!valid) {
                                return false;
                            }
                            else {
                                saveInfo();
                            }
                        }
                        else {
                            return false;
                        }
                    }

                    document.getElementById("divStep_" + as).style.display = "none";
                    document.getElementById("step_" + as).className = "cart-steps";
                    as++;
                    //Transfer bancaria
                    if (as < 3) {
                        document.getElementById("divStep_" + as).style.display = "block";
                        document.getElementById("step_" + as).className = "cart-steps-selected";
                    }
                    else if (as == 3) {
                        //Redirect otra forma de pago externa o pago con transferencia
                        var payment = $("input[@name=payment_methods]:checked").attr('id');; // 1 transfer  2 dineromail 3 paypal
                        if (payment == 'radio_payment_1') {
                            EndShopping();
                        }
                        else if (payment == 'radio_payment_2') {
                            PaymentDineroMail();
                        }
                        else if (payment == 'radio_payment_3') {
                            PaymentPayPal();
                        }
                        else {
                            alert("Favor de elegir una forma de Pago");
                            return false;
                        }

                    }


                }
            }

            $("#next")
			.click(function () {
			    next();
			    return false;
			});

            function saveInfo(o, s) {
                var x = 0;
                var jsonData = {
                    Name: $('#txtName').val(),
                    LastName: $('#txtLastName').val(),
                    Company: $('#txtCompany').val(),
                    Email: $('#txtEmail').val(),
                    Phone: $('#txtPhone').val(),
                    Address1: $('#txtAddress1').val(),
                    Address2: $('#txtAddress2').val(),
                    City: $('#txtCity').val(),
                    ZipCode: $('#txtZipCode').val(),
                    State: $('#txtState').val(),
                    Country: $('#drpCountry').val(),
                    Fax: $('#txtFax').val()
                };
                var data = JSON.stringify(jsonData);

                PageMethods.SaveInfo(data, $('#drpShippingMethod').val(),
                    function () {
                        var x = 1;
                    },
                    function (error) {
                        alert(error.get_message());
                    });
            }
        });
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:HiddenField ID="hiddenIsValid" runat="server" ClientIDMode="Static" Value="false" />
    <asp:HiddenField ID="drpshippingValue" runat="server" ClientIDMode="Static" Value="" />
    <asp:Button ID="btnhiddenStep1" OnClick="UpdateStep1" Style="display: none;" runat="server"
        ClientIDMode="Static" />
    <div class="category-left">
        <div class="category-map">
            <asp:Label ID="lblRoute" runat="server">HOME / CARRITO DE COMPRA</asp:Label>
        </div>
        <br />
        <div class="categories-content" style="border: solid 0px gray; margin-left: 0px; width: 765px;">
            <div class="cart-steps-title">
                3 SENCILLOS PASOS
                <br />
                PARA TU COMPRA:
            </div>
            <div id="step_1" class="cart-steps-selected">
                PASO 1
                <br />
                Confirma tu pedido
            </div>
            <div id="step_2" class="cart-steps">
                PASO 2
                <br />
                Llena tus datos de envío
            </div>
            <div id="step_3" class="cart-steps">
                PASO 3
                <br />
                Pagar
            </div>
            <br />
            <div id="divStep_1" style="display: block;">
                <div class="items-container" id="itemsContainer" runat="server">
                </div>
                <br />
                <asp:Image ID="banner" ImageUrl="~/Images/banner_cart_dineromail.png" runat="server"
                    Style="border: solid 0px gray; border-bottom: solid 1px #DFDCD5; border-right: solid 1px #DFDCD5; float: left;" />
                <div class="total-account">
                    <table style="color: #9A876F; font-family: Arial; font-size: 14px; float: left; margin-top: 10px; margin-left: 15px;"
                        border="0">
                        <tr>
                            <td style="text-align: right; width: 80px;">
                                <asp:Label ID="label1" runat="server">Subtotal:</asp:Label>
                            </td>
                            <td style="text-align: left; padding-left: 15px;">
                                <asp:Label ID="lblSubtotal" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr style="display: none;">
                            <td style="text-align: right;">
                                <asp:Label ID="label3" runat="server">IVA 16%:</asp:Label>
                            </td>
                            <td style="text-align: left; padding-left: 15px;">
                                <asp:Label ID="lblTax" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;">
                                <asp:Label ID="label5" runat="server">Envio:</asp:Label>
                            </td>
                            <td style="text-align: left; padding-left: 15px;">
                                <asp:DropDownList ID="drpShippingMethod" runat="server" ClientIDMode="Static" EnableViewState="true"
                                    onchange="fnOnChangedrp();">
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;">
                                <asp:Label ID="label7" runat="server">Total:</asp:Label>
                            </td>
                            <td style="text-align: left; padding-left: 15px; color: #A8C32D;">
                                <asp:Label ID="lblTotal" runat="server"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
                <br />
            </div>
            <div id="divStep_2" style="display: none;">
                <div class="shipping-data">
                    <div>
                        * Nombre<br />
                        <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <div>
                        * Apellido<br />
                        <asp:TextBox ID="txtLastName" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <br />
                    <div>
                        Compañia<br />
                        <asp:TextBox ID="txtCompany" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <div>
                        * Correo electronico<br />
                        <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <br />
                    <div style="width: 96%">
                        * Dirección<br />
                        <asp:TextBox ID="txtAddress1" runat="server" ClientIDMode="Static"></asp:TextBox>
                        <div style="float: none; margin-bottom: 0px;">
                        </div>
                        <asp:TextBox ID="txtAddress2" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <br />
                    <div>
                        * Ciudad<br />
                        <asp:TextBox ID="txtCity" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <div>
                        Estado/Provincia<br />
                        <asp:TextBox ID="txtState" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <br />
                    <div>
                        * Código postal<br />
                        <asp:TextBox ID="txtZipCode" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <div>
                        * Pais<br />
                        <asp:DropDownList ID="drpCountry" runat="server" ClientIDMode="Static">
                            <asp:ListItem Text="México" Value="1" Selected="True"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <br />
                    <div>
                        * Télefono<br />
                        <asp:TextBox ID="txtPhone" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <div>
                        Fax<br />
                        <asp:TextBox ID="txtFax" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </div>
                    <br />
                </div>
                <div id="divPaymentMethods">
                    <div id="div_payment_1" class="paymethoddiv">
                        <asp:RadioButton ID="radio_payment_1" Checked="True" GroupName="payment_methods"
                            runat="server" ClientIDMode="Static" /><img src="Images/deposito.jpg" alt="" />
                    </div>
                    <div id="div_payment_2" class="paymethoddiv">
                        <asp:RadioButton ID="radio_payment_2" GroupName="payment_methods" runat="server"
                            ClientIDMode="Static" /><img src="Images/dineromail.jpg" alt="" />
                    </div>
                    <div id="div_payment_3" class="paymethoddiv">
                        <asp:RadioButton ID="radio_payment_3" GroupName="payment_methods" runat="server"
                            ClientIDMode="Static" /><img src="Images/paypal.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div id="divStep_3" style="display: none;">
                <div class="shipping-data" style="text-align: center;">
                    <br />
                    <br />
                    <%--<span style="color: #A9C32E; font-size: 18px;">PAGO ONLINE / TARJETA / OXXO / 7 ELEVEN</span>
                    <br />
                    <br />
                    <br />
                    <asp:Image ID="image1" runat="server" ImageUrl="~/Images/formasdepago.jpg" Style="float: left;
                        margin-left: 150px;" />
                    <span style="color: #A9C32E; float: left; margin-top: 15px; margin-left: 20px;">Total:
                        <span id="totalpayment1"></span></span>
                    <br style="clear: none;" />
                    <br style="clear: none;" />
                    <asp:ImageButton ID="btnPayment" runat="server" ImageUrl="~/Images/botonpagar.jpg"
                        Style="width: auto; border-width: 0px; float: left; margin-top: 15px; display: none;"
                        ClientIDMode="Static" OnClientClick="PaymentDineroMail(); return false;" />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />--%>
                    <span style="color: #A9C32E; font-size: 18px;">TRANSFERENCIA O DEPOSITO BANCARIO</span>
                    <br />
                    <br />
                    <table style="margin: 0 auto;">
                        <tr>
                            <td>
                                <img src="Images/hsbc.jpg" />
                            </td>
                            <td>
                                <span style="color: #AB9C89; font-size: 14px;">CTA: 4054844949 CLABE INTERBANCARIA 021320040548449499 Juan Carlos Koosuke Minami</span>
                                <span style="color: #A9C32E; margin-left: 20px;">Total: <span id="totalpayment2"></span>
                                </span>
                            </td>
                        </tr>
                    </table>
                    <br />
                    <asp:ImageButton ID="btnEnd" runat="server" ImageUrl="~/Images/botonfinalizar.jpg"
                        Style="width: auto; border-width: 0px; float: right; margin-top: 5px; margin-right: 140px; display: none;"
                        ClientIDMode="Static" OnClientClick="EndShopping(); return false;" />
                    <br />
                    <br />
                    <span style="color: #AB9C89; font-size: 14px;">En caso de transferencia o deposito bancario
                        favor de llamar al: <span style="font: 16px; font-weight: bold;">01 (33) 3612 7222</span>
                        para confirmar</span>
                    <br />
                    <br />
                </div>
            </div>
            <div id="divStep_externalPayment" style="display: none; height: 150px;">
                <div class="shipping-data">
                    <center>
                        <img alt="" src="Images/loading.gif" />
                        <h2>Redireccionando Sitio seguro Forma de Pago, por favor espere....</h2>
                    </center>
                </div>
            </div>
            <asp:ImageButton ID="next" runat="server" ImageUrl="~/Images/nextbutton.png" Style="float: right;"
                ClientIDMode="Static" />
        </div>
        <br style="clear: both;" />
    </div>
    <div class="category-right">
        <div class="main_view">
            <div class="window" id="window">
                <div class="image_reel" id="imagereel" runat="server" clientidmode="Static">
                </div>
                <div class="paging" id="paging" runat="server" clientidmode="Static">
                </div>
            </div>
        </div>
        <div class="main_view">
            <div class="window" id="window2">
                <div class="image_reel" id="imagereel2" runat="server" clientidmode="Static">
                </div>
                <div class="paging2" id="paging2" runat="server" clientidmode="Static">
                </div>
            </div>
        </div>
        <div class="main_view">
            <div class="window" id="window3">
                <div class="image_reel" id="imagereel3" runat="server" clientidmode="Static">
                </div>
                <div class="paging" id="paging3" runat="server" clientidmode="Static">
                </div>
            </div>
        </div>
    </div>
</asp:Content>
